{% extends 'base-static.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">
{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            设备列表
        </h1>
        <ol class="breadcrumb">
            <li><a href="{% url 'system:route' %}"><i class="fa fa-dashboard"></i>路由列表</a></li>
            <li class="active">设备列表</li>
        </ol>
    </section>

    <section class="content">
        <div class="box-body">
            {% csrf_token %}
            <div class="demoTable" style="margin-bottom: 20px;">
                <label style="font-weight: 500;!important;">设备名称：</label>
                <div class="layui-inline">
                    <input class="layui-input" name="device_name" id="device_name" autocomplete="off">
                </div>

                <label style="margin-left: 30px;font-weight: 500;!important;">设备 Mac：</label>
                <div class="layui-inline">
                    <input class="layui-input" name="device_mac" id="device_mac" autocomplete="off">
                </div>

                <button class="layui-btn" data-type="reload" id="search">搜索</button>
            </div>

            <table id="dtbList" lay-filter="test" class="display" cellspacing="0" width="100%">

            </table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="bind">绑定</a>
                <a class="layui-btn layui-btn-xs" lay-event="unbind">启用通道</a>
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="del">解绑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">停止通道</a>
                <a class="layui-btn layui-btn-xs" lay-event="del">设备详情</a>
            </script>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="batchBind">批量绑定</button>
                    <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="batchUnBind">批量解除绑定</button>
                    <button class="layui-btn layui-btn-sm" lay-event="batchEnabled">批量启用通道</button>
                    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="batchStop">批量停止通道</button>
                </div>
            </script>

            <!--修改名称-->
            <div class="layer_form" id="device_change_name" style="display: none;">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" name="new_device_name" required lay-verify="required" placeholder="输入新名称"
                               autocomplete="off" class="layui-input" style="margin-left: -50px;margin-top: 20px;"
                               id="new_device_name">
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}


{% block js %}
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>
    <script>
        var url;
        if ((window.location.href).indexOf("mac_addr") === -1) {
            url = "{% url 'system:device-list' %}";
        } else {
            var mac_addr = (window.location.href).split('?mac_addr=')[1];
            url = ["{% url 'system:device-list' %}" + "?mac_addr=" + mac_addr];
        }

        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            form.render();

            // 表格渲染
            table.render({
                elem: '#dtbList',
                id: 'Reload',
                url: url,
                method: 'get',
                toolbar: '#toolbarDemo',    // 开启头部工具栏，并绑定模板
                height: 612,
                page: true,
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {
                        field: 'name',
                        title: '设备名称',
                        width: 130,
                        fixed: 'left',
                        templet: function (d) {
                            return '<a href="javascript:void(0)" class="layui-table-link" onclick="changeName(this)" mac=' + d.mac_addr + '>' + d.name + '</a>'
                        }
                    }
                    , {field: 'mac_addr', title: '设备Mac', width: 130, sort: true}
                    , {field: 'status', title: '通道', width: 80, sort: true}
                    , {field: 'select_lines', width: 130, title: '当前线路'}
                    , {field: 'tunnel_status', width: 80, title: '通道状态'}
                    , {field: 'public_ip', width: 130, title: '公网IP'}
                    , {field: 'bind_user', width: 100, title: '绑定账户'}
                    , {
                        field: 'expire_days', width: 100, title: '剩余天数', sort: true,
                        templet: function (d) {
                            if (d.expire_days < 0) {
                                return '<span class="label label-primary" style="background-color:#FF5722 !important;color:white;">过期' + Math.abs(d.expire_days) + '天</span>';
                            } else {
                                return d.expire_days;
                            }
                        }
                    }
                    , {fixed: 'right', 'title': '操作', align: 'center', width: 330, toolbar: '#barDemo'}
                ]
                ],
            });

            // 搜索过滤
            $('#search').click(function () {
                var device_name = $('#device_name').val();
                var device_mac = $('#device_mac').val();

                table.reload('Reload', {
                    where: {
                        'device_name': device_name,
                        'device_mac': device_mac,
                    }
                })
            });

            // 监听行工具栏事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                var tr = obj.tr;

                var mac_addr = data.mac_addr;

                if (layEvent === 'bind') {
                    layer.open({
                        type: 2,
                        area: ['600px', '300px'],
                        maxmin: false,
                        fixed: false,
                        resize: false,
                        move: false,
                        title: '选择账户-线路',
                        content: ["{% url 'system:device-account-line' %}" + '?mac_addr=' + mac_addr, 'no'],
                        end: function () {
                            table.reload('Reload', 'data');
                        }
                    })
                }

            });

            // 监听头部工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'batchBind':
                        var data = checkStatus.data;
                        batchBind(data);
                        break;
                    case 'batchUnBind':
                        var data = checkStatus.data;
                        batchUnBind(data);
                        break;
                    case 'batchEnabled':
                        var data = checkStatus.data;
                        batchEnabled(data);
                        break;
                    case 'batchStop':
                        var data = checkStatus.data;
                        batchStop(data);
                        break;
                }
            });

            // 批量绑定
            function batchBind(data) {
                if (data.length === 0) {
                    layer.alert('请选择要绑定的设备！', {icon: 7});
                    return;
                }
            }

            // 批量解绑
            function batchUnBind(data) {
                if (data.length === 0) {
                    layer.alert('请选择要解绑的设备！', {icon: 7});
                    return;
                }
            }

            // 批量启用通道
            function batchEnabled(data) {
                if (data.length === 0) {
                    layer.alert('请选择要启用的设备！', {icon: 7});
                    return;
                }
            }

            // 批量停止
            function batchStop(data) {
                if (data.length === 0) {
                    layer.alert('请选择要停止的设备！', {icon: 7});
                    return;
                }
            }


        });

        // 修改名称
        function changeName(that) {
            var device_addr = $(that).attr('mac');
            var mac_name = $(that).text();
            $('#new_device_name').val(mac_name);
            layer.open({
                type: 1,
                area: ['300px', '180px'],
                maxmin: false,  // 禁止放大、全屏
                fixed: false,
                resize: false,  // 禁止拉伸
                title: '修改名称',
                skin: 'layui-layer-lan',
                content: $("#device_change_name"),
                btn: ['提交', '取消'],
                btn1: function (index, layero) {
                    var new_name = $('#new_device_name').val();
                    if (new_name.length === 0) {
                        layer.alert('名称不能为空', {icon: 7});
                        return false;
                    } else if (new_name.length >= 15 || new_name.length < 5) {
                        layer.alert('名称长度 5-15个字符', {icon: 7});
                        return false;
                    } else {
                        $.ajax({
                            url: ["{% url 'system:device-update-name' %}" + '?new_name=' + new_name + '&mac_addr=' + device_addr + '&name=' + mac_name],
                            type: 'get',
                            cache: false,
                            success: function (resp) {
                                if (resp.code === 0) {
                                    layer.alert(resp.msg, {icon: 1}, function (index) {
                                        parent.layer.closeAll(); // 关闭所有弹窗
                                        $(that).text(new_name);
                                    });

                                } else {
                                    layer.alert(resp.msg, {icon: 5});
                                }
                            }

                        })
                    }
                },
                btn2: function (index, layero) {
                    layer.closeAll();
                }

            });
        }
    </script>


{% endblock %}
